<template>
    <div id="wrapper">
        <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
        <main>
            <div class="left-side">
        <span class="title">
          Welcome to your new project!~{{author}}
        </span>
                <system-information></system-information>
            </div>

            <div class="right-side">
                <div class="doc">
                    <div class="title">Getting Started - {{title}}</div>
                    <p>
                        electron-vue comes packed with detailed documentation that covers everything from
                        internal configurations, using the project structure, building your application,
                        and so much more.
                    </p>
                    <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs
                    </button>
                    <br><br>
                </div>
                <div class="doc">
                    <div class="title alt">Other Documentation</div>
                    <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
                    <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
                    <button class="alt" @click="click_handle">Hi</button>
                    <button class="alt" @click="GoToPoem_handle">GoToPoem</button>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
  import SystemInformation from './LandingPage/SystemInformation'
  // electron的remote
  // let remote = require('electron').remote
  // const app = remote.app

  export default {
    name: 'landing-page',
    components: {SystemInformation},
    data () {
      return {
        title: 'hello world',
        msg: '我要改变...',
        author: 'LC'
      }
    },
    beforeCreate () {
      console.log('...beforeCreate...')
    },
    created () {
      console.log('...created...')
    },
    beforeMount () {
      console.log('...beforeMount...')
    },
    mounted () {
      console.log('...mounted...')
      // remote可用
      // console.log(remote, app)
      // console.log(app.getAppPath())
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      click_handle () {
        console.log('Hi,LC...')
        alert('Hi,LC...')
        console.log(this.msg)
        this.msg = '我改变了...'
        console.log(this.msg)
      },
      GoToPoem_handle () {
        // 路由跳转
        this.$router.push('/poem')
      }
    }
  }
</script>

<style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Source Sans Pro', sans-serif;
    }

    #wrapper {
        background: radial-gradient(
                ellipse at top left,
                rgba(255, 255, 255, 1) 40%,
                rgba(229, 229, 229, .9) 100%
        );
        height: 100vh;
        padding: 60px 80px;
        width: 100vw;
    }

    #logo {
        height: auto;
        margin-bottom: 20px;
        width: 420px;
    }

    main {
        display: flex;
        justify-content: space-between;
    }

    main > div {
        flex-basis: 50%;
    }

    .left-side {
        display: flex;
        flex-direction: column;
    }

    .welcome {
        color: #555;
        font-size: 23px;
        margin-bottom: 10px;
    }

    .title {
        color: #2c3e50;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .title.alt {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .doc p {
        color: black;
        margin-bottom: 10px;
    }

    .doc button {
        font-size: .8em;
        cursor: pointer;
        outline: none;
        padding: 0.75em 2em;
        border-radius: 2em;
        display: inline-block;
        color: #fff;
        background-color: #4fc08d;
        transition: all 0.15s ease;
        box-sizing: border-box;
        border: 1px solid #4fc08d;
    }

    .doc button.alt {
        color: #42b983;
        background-color: transparent;
    }
</style>
